<template>
  <el-card class="card">
    <div class="title">
      <h4>个人信息</h4>
      <div  style="width:100%;background-color:rgb(240,240,240);height:2px"></div>
    </div>
    <div class="tbody">
        <span style="margin-right:40px">头像：</span>
                <el-upload
  class="avatar-uploader"
  :show-file-list="false"
  :multiple="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  action="http://localhost:8008/member-service/member/updateHeadPortrait"
  :headers="header"
  style="display: inline-block;">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div style="margin-top:30px">
     <span>用户名：</span>
           <el-input v-model="username" style="display: inline-block;width:200px" @blur="update"></el-input>
        
</div>
          
    </div>
  </el-card>
</template>

<script>
import ShareData from "@/utils/localStorage.js";
import{selectById ,update}from '@/api/member.js'
export default {
data() {
      return {
        head :"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
        imageUrl:"",
        username:"username",
        member:{},
        header:{token:""}
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.member.headPortrait=res.msg
        update(this.member).then(res=>{
          if(res.data.code==="0000"){
            this.$message.success("上传成功")
          }
        })
        // console.log(res)
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');

        }
        return isLt2M;
      },
      getMemberInfo(){
      let memberId=ShareData.getItem("memberId")
      this.header.token=ShareData.getToken()
      selectById(memberId).then(res=>{
        console.log(res)
        if(res.data.code==="0000"){
          this.member=res.data.data
          if(res.data.data.gender!==null){
            this.member.gender=res.data.data.gender.code
          }
          this.username=res.data.data.nickname
          this.imageUrl=this.head+res.data.data.headPortrait
         

          
        }
      })
      },
      update(){
        this.member.nickname=this.username
       update(this.member).then(res=>{
         if(res.data.code==="0000"){
                this.$message.success("用户名修改成功")
              }
       })
      }

    },
mounted(){
  this.getMemberInfo()
}
}
</script>

<style lang="scss" scoped>
.card {
  padding: 3%;
  margin-bottom: 12%;
}
.title {
  text-align: left;
  margin-top: -20px;
}
.tbody{
     padding: 3%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
  }
</style>
